<template>
  <page-header-wrapper>
    <!-- PageHeader 第二种使用方式 (v-slot) -->
    <!-- 提示 -->
    <a-result title="该功能暂未开放" @click="notopened" style="padding-top: 120px">
      <template #extra>
      </template>
    </a-result>
    <div style="display:none">
      <!-- 鼠标禁用 -->
      <!-- <div style="z-index: 999;display:flex;height:80%;width:100%;position:absolute;background-color:transparent;opacity:1;cursor:not-allowed;"></div> -->
      <!-- 提示 -->
      <a-modal
        title="专家详情"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @cancel="handleCancel"
        v-if="visible"
      >
        <a-form-model ref="expertmessage" :model="expertmessage" :label-col="{span: 7}" :wrapper-col="{span: 16} ">
          <a-form-model-item label="专家姓名" prop="username" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.username"></a-input>
          </a-form-model-item>
          <a-form-model-item label="专家身份证号码" prop="card_num" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.card_num" ></a-input>
          </a-form-model-item>
          <a-form-model-item label="专家性别" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-select v-model="expertmessage.sex">
              <a-select-option value="男">
                男
              </a-select-option>
              <a-select-option value="女">
                女
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="专家所属单位" prop="company_name" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.company_name" :disabled="true"></a-input>
          </a-form-model-item>
          <a-form-model-item label="专家手机号码" prop="phone" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.phone" :disabled="true"></a-input>
          </a-form-model-item>
          <a-form-model-item label="专家职称" prop="experts_title" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.experts_title" :disabled="true"></a-input>
          </a-form-model-item>
          <a-form-model-item label="职称专业" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.title_major" :disabled="true"></a-input>
          </a-form-model-item>
          <a-form-model-item label="专业资格" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.major_status" :disabled="true"></a-input>
          </a-form-model-item>
          <!-- <a-form-model-item label="专家论证类别" prop="expert_types" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.expert_types" ></a-input>
          </a-form-model-item> -->
          <a-form-model-item label="专家论证类别" prop="experts_types" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-select
              mode="multiple"
              style="width: 100%"
              v-model="expertmessage.experts_types"
              :disabled="true"
            >
              <a-select-option v-for="item in experttype" :key="item.type_id" :value="item.type_name">
                {{ item.type_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="专家级别" prop="experts_level" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.experts_level" :disabled="true"></a-input>
          </a-form-model-item>
          <a-form-model-item label="本人证件照" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-upload
              :file-list="expertmessage.my_photo"
              @preview="handlePreview"
              list-type="picture-card"
            ></a-upload>
          </a-form-model-item>
          <a-form-model-item label="身份证文件" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-upload
              :file-list="expertmessage.my_card_photo"
              @preview="handlePreview"
              list-type="picture-card"
            ></a-upload>
          </a-form-model-item>
          <a-form-model-item label="学历证明文件" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-upload
              :file-list="expertmessage.academic_credentials"
              @preview="handlePreview"
              list-type="picture-card"
            ></a-upload>
          </a-form-model-item>
          <a-form-model-item label="职称文件" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-upload
              :file-list="expertmessage.title_document"
              @preview="handlePreview"
              list-type="picture-card"
            ></a-upload>
          </a-form-model-item>
          <a-form-model-item label="执业资格文件" prop="" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-upload
              :file-list="expertmessage.practice_qualification_certificate"
              @preview="handlePreview"
              list-type="picture-card"
            ></a-upload>
          </a-form-model-item>
          <a-form-model-item label="备注" prop="remarks" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
            <a-input v-model="expertmessage.remarks" :disabled="true"></a-input>
          </a-form-model-item>
        </a-form-model>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelimg">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
        <template slot="footer">
          <Button type="button" class="ant-btn ant-btn-primary" @click="handleCancel">确定</Button>
        </template>
      </a-modal>
      <a-table
        :columns="columns"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :row-key="record => record.user_id"
        :data-source="dataSource"
        :rowClassName="rowClassName"
        :scroll="{ x: 1800 }"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="expert_types" slot-scope="expert_types">
          <a-tag v-for="tag in expert_types" :key="tag" :value="tag" color="blue" >
            {{ tag }}
          </a-tag>
        </span>
        <template slot="operation" slot-scope="text, record">
          <a-popconfirm
            v-if="dataSource.length"
            title="确定操作?"
            okText="确定"
            cancelText="取消"
            @confirm="() => passrecord(record)"
          >
            <a href="javascript:;">通过</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-popconfirm
            v-if="dataSource.length"
            title="确定操作?"
            okText="确定"
            cancelText="取消"
            @confirm="() => refuserecord(record)"
          >
            <a href="javascript:;">拒绝</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a
            v-if="dataSource.length"
            @click="() => details(record)"
          >
            <a href="javascript:;">详情</a>
          </a>
        </template>
      </a-table>
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="batchpass">
        批量通过
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div>
  </page-header-wrapper>
</template>

<script>
import { getdatatable } from '@/api/reviewexpert'
import { changestatus, lotsizepass } from '@/api/changeReviewexpertsta'

const columns = [
  {
    title: '姓名',
    dataIndex: 'username',
    width: 125,
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
    width: 150
  },
  {
    title: '身份证号',
    dataIndex: 'card_num',
    width: 175
  },
  {
    title: '专家职称',
    dataIndex: 'experts_title',
    width: 125
  },
  {
    title: '所属单位',
    dataIndex: 'company_name'
  },
  {
    title: '专家级别',
    dataIndex: 'experts_level',
    width: 125
  },
  {
    title: '专家类别',
    dataIndex: 'expert_types',
    scopedSlots: { customRender: 'expert_types' }
  },
  {
    title: '状态',
    dataIndex: 'expert_status',
    width: 90
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    fixed: 'right',
    width: 207.2,
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  data () {
    return {
      visible: false,
      modal2Visible: false,
      confirmLoading: false,
      expertmessage: {},
      dataSource: [],
      selectedRowKeys: [], // Check here to configure the default column
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50']
      },
      loading: false,
      columns,
      previewVisible: false,
      previewImage: ''
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    }
  },
  created () {
    this.getdata()
  },
  methods: {
    handlePreview (file) {
      this.previewImage = file.url
      this.previewVisible = true
    },
    handleCancelimg () {
      this.previewVisible = false
      this.previewImage = ''
    },
    passrecord (record) {
      var pass = new FormData()
      pass.append('operation', 'verify')
      pass.append('all_user_ids', record.user_id)
      changestatus(pass).then(res => {
        if (res.code === 200) {
          this.$message.success('审核通过')
          this.visible = false
        } else {
          this.$message.error(res.message)
        }
      })
      setTimeout(() => {
        this.getdata()
      }, 500)
    },
    refuserecord (record) {
      var refuse = new FormData()
      refuse.append('operation', 'refuse')
      refuse.append('all_user_ids', record.user_id)
      changestatus(refuse).then(res => {
        if (res.code === 200) {
          this.$message.success('拒绝通过')
          this.visible = false
        } else {
          this.$message.error(res.message)
        }
      })
      setTimeout(() => {
        this.getdata()
      }, 500)
    },
    handleCancel () {
      this.visible = false
      this.expertmessage = {}
    },
    rowClassName () {
      return 'rowClass'
    },
    details (value) {
      this.dialogTitle = '专家详情'
      this.expertmessage = JSON.parse(JSON.stringify(value))
      console.log(this.expertmessage)
      this.visible = true
      console.log(this.expertmessage)
      var formdata = new FormData()
      formdata.append('type_kinds', '1')
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, sorter) {
      console.log(pagination)
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getdata()
    },
    getdata () {
      var fd = new FormData()
      fd.append('per_page', this.pagination.pageSize)
      fd.append('current_page', this.pagination.current)
      fd.append('experts_status', 0)
      this.loading = true
      getdatatable(fd).then(res => {
        this.dataSource = res.result.data
        // console.log(res.result.data)
        Object.assign(this.pagination, { 'pageSize': Number(res.result.per_page), 'total': res.result.total, 'current': res.result.current_page })
        this.loading = false
      })
    },
    batchpass () {
      this.loading = true
      this.selectedRowKeys.map(String)
      var passmes = new FormData()
      passmes.append('all_user_ids', this.selectedRowKeys)
      passmes.append('operation', 'verify')
      lotsizepass(passmes)
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false
        this.selectedRowKeys = []
        this.getdata()
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
  /deep/ .components-input-demo-size .ant-input {
    width: 200px;
    float: right;
  }
  /deep/ .rowClass{
    background-color: #fff;
  }
  /deep/ .ant-modal-content{
    width: 180%;
    left: -36%;
  }
</style>
